<script setup>

import {onMounted, onUnmounted, ref} from 'vue';
import * as echarts from 'echarts';
import router from "@/router/index.js";
import {useUserStore} from "@/stores/user.js"

import {useOrderStore} from "@/stores/order.js";
import {useInventoryStore} from "@/stores/inventory.js";
import {usegoodsStore} from "@/stores/goods.js";

const inventoryStore = useInventoryStore()
const userStore = useUserStore()
const goodsStore = usegoodsStore()
const OrderStore = useOrderStore()
const router_item = ref([
  {
    title: "商品数量",
    num: '1',
    path: "/goods"
  },
  {
    title: "库存数量",
    num: '1',
    path: "/inventory"
  },
  {
    title: "订单数量",
    num: '1',
    path: "/order"
  },
  {
    title: "用户数量",
    num: '1',
    path: "/user"
  }
])
const getRouter = (item) => {
  router.push(item.path)
}
// 获取DOM元素引用-------折线图容器元素
const lineChart = ref(null);//折线图
let linechartInstance = null;
// 获取DOM元素引用-------柱状图图容器元素
const barChart = ref(null);//折线图
let barInstance = null;
// 饼状图
const pieChart = ref(null);//折线图
let pieInstance = null;
//南丁格尔玫瑰图
const pieRoseChart = ref(null);
let pieRoseInstance = null;
// 当组件挂载后初始化图表
onMounted(() => {
  lineChartOption()
  barInstanceOption()
  pieInstanceOption()
  pieRoseInstanceOption()
  const goodsInfoNum = goodsStore.goodsInfo.length ? goodsStore.goodsInfo.length : 1
  const inventoryInfoNum = inventoryStore.inventoryInfo.length ? inventoryStore.inventoryInfo.length : 1
  const orderInfoNum = OrderStore.orderInfo.length ? OrderStore.orderInfo.length : 1
  const userInfoNum = userStore.userInfo.length ? userStore.userInfo.length : 1
  console.log(goodsInfoNum,`goodsInfoNumgoodsInfoNum`)

  router_item.value[0].num = goodsInfoNum
  router_item.value[1].num = inventoryInfoNum
  router_item.value[2].num = orderInfoNum
  router_item.value[3].num = userInfoNum
});
//折线图
const lineChartOption = () => {
  linechartInstance = echarts.init(lineChart.value);
  const option = {
    xAxis: {
      type: 'category',
      data: ['可乐', '汉堡', '小食', '甜品', '饮品', '早餐']
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147],
        type: 'line'
      }
    ]
  };
  linechartInstance.setOption(option);
}
//柱状图
const barInstanceOption = () => {
  barInstance = echarts.init(barChart.value);
  const option = {
    xAxis: {
      type: 'category',
      data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [110, 101, 100, 90, 80, 50, 40, 30],
        type: 'bar'
      }
    ]
  };
  barInstance.setOption(option);
}
//饼状图
const pieInstanceOption = () => {
  pieInstance = echarts.init(pieChart.value);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: '50%',
        data: [
          {value: 48, name: '已下单'},
          {value: 100, name: '未下单'},
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  pieInstance.setOption(option);
}

//南丁格尔玫瑰图
const pieRoseInstanceOption = () => {
  pieRoseInstance = echarts.init(pieRoseChart.value);
  const option = {
    legend: {
      top: 'bottom'
    },
    tooltip: {
      trigger: 'item'
    },
    toolbox: {
      show: true,
      feature: {
        mark: {show: true},
        dataView: {show: true, readOnly: false},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    series: [
      {
        name: '购买次数',
        type: 'pie',
        radius: [10, 50],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          {value: 10, name: '小明'},
          {value: 28, name: '小红'},
          {value: 15, name: '小蓝'},
          {value: 13, name: '小紫'},
          {value: 10, name: '小绿'},
          {value: 18, name: '小黑'},
          {value: 16, name: '小白'},

        ]
      }
    ]
  };
  pieRoseInstance.setOption(option);
}
// 销毁图表实例以避免内存泄漏
onUnmounted(() => {
  if (linechartInstance) {
    linechartInstance.dispose();
  }
  if (barInstance) {
    barInstance.dispose();
  }
  if (pieInstance) {
    pieInstance.dispose();
  }
  if (pieRoseInstance) {
    pieRoseInstance.dispose();
  }
});
</script>

<template>
  <div class="layout">
    <div class="layout_router">
      <el-card style="max-width:100%">
        <template #header>
          <div class="card-header">
            <span>数据分析:</span>
          </div>
        </template>
        <div class="router_box">
          <div v-for="(item,index) in router_item" :key="index"
               @click="getRouter(item)"
          >
            <div class="router_item">
              <div class="router_item_title">{{ item.title }}</div>
              <div class="router_item_num">{{ item.num }}</div>
            </div>
          </div>
        </div>

      </el-card>
    </div>
    <div class="layout_eacharts">
      <el-card style="width:24%">
        <template #header>
          <div class="card-header">
            <span>商品分析:</span>
          </div>
        </template>
        <div ref="lineChart" class="layout_box">

        </div>

      </el-card>
      <el-card style="width:24%">
        <template #header>
          <div class="card-header">
            <span>库存分析:</span>
          </div>
        </template>
        <div ref="barChart" class="layout_box">

        </div>

      </el-card>
      <el-card style="width:24%">
        <template #header>
          <div class="card-header">
            <span>订单分析:</span>
          </div>
        </template>
        <div ref="pieChart" class="layout_box">

        </div>

      </el-card>
      <el-card style="width:24%">
        <template #header>
          <div class="card-header">
            <span>用户数量:</span>
          </div>
        </template>
        <div ref="pieRoseChart" class="layout_box">

        </div>

      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout {
  width: 100%;

  .layout_router {
    width: 100%;

    .router_box {
      padding-left: 20px;
      padding-right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;

      .router_item {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;

        .router_item_title {
          font-size: 14px;
          color: #666;
        }

        .router_item_num {
          margin-top: 20px;
          font-size: 24px;
          color: #333;
        }
      }
    }
  }

  .layout_eacharts {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;

    .layout_box {
      width: 100%;
      min-height: 400px;
    }
  }

}

</style>
